<template>
  <div class="terms-container">
    <!-- 顶部返回按钮 -->
    <div class="top-bar">
      <button @click="handleBack" class="back-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round">
          <path d="m12 19-7-7 7-7" />
          <path d="M19 12H5" />
        </svg>
        <span class="back-text">Back</span>
      </button>
    </div>

    <!-- 指南内容区 -->
    <main class="terms-content">
      <div class="terms-title-main">Nexbie Guideline: Welcome to the Community</div>
      <div class="terms-intro">
        Welcome to Nexbie, a place where your creativity is supercharged by AI. Our goal is to
        provide a space for you to unleash your imagination, share it with the world, and even turn
        your digital designs into physical products. Here are the core features of the Nexbie
        universe:
      </div>

      <!-- 条款列表 -->
      <section class="terms-list">
        <div
          class="term-item"
          v-for="(term, index) in terms"
          :key="index"
          :class="{ 'large-line-height': [0, 1, 2].includes(index) }">
          <!-- 条款标题 -->
          <div class="term-title" @click="toggleTerm(index)">
            <span class="term-heading">{{ term.title }}</span>
            <span class="toggle-icon" :class="{ expanded: term.expanded }">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </div>

          <!-- 条款内容（使用安全渲染方式） -->
          <div class="term-content" v-if="term.expanded" :class="{ expanding: term.expanding }">
            <div class="content-inner" v-html="sanitizeHtml(term.content)"></div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  // 返回上一页
  const handleBack = () => {
    router.back();
  };

  // 增强版HTML清理函数，彻底移除所有可能引起问题的内容
  const sanitizeHtml = (html) => {
    if (!html) return '';

    // 1. 移除所有HTML注释
    let clean = html.replace(/<!--[\s\S]*?-->/g, '');

    // 2. 移除所有可能的属性注入
    clean = clean.replace(/<([a-z][a-z0-9]*)\s*[^>]*>/gi, '<$1>');

    // 3. 移除多余空白和换行
    clean = clean.trim().replace(/\s+/g, ' ');

    // 4. 确保标签正确闭合
    clean = clean.replace(/<\/li>\s*<li>/g, '</li><li>').replace(/<\/p>\s*<p>/g, '</p><p>');

    return clean;
  };

  // 指南条款数据（原始文本，不含HTML标签）
  const terms = ref([
    {
      title: 'What is Nexbie？',
      content: `
      Welcome to Nexbie — where imagination meets creation.

      Dream it with AI. Make it real. Discover endless cool finds born from creativity.

      - Nex Lab (AIGC Creation)
      At the heart of Nexbie is Nex Lab, your personal AI creation studio. Whether you're starting with a simple text prompt (text-to-image) or an existing picture (image-to-image), our powerful tools help you generate unique and stunning visuals in moments. This is where every masterpiece begins.

      - Community Posts
      Your profile is your gallery. Post your creations for the community to see, get feedback, and gain recognition. But it doesn't stop there. Popular original works can even get a chance to be commercialized!

      - Nexbie Arcade (Competitions)
      Ready to test your skills? The Nexbie Arcade is our periodic creative competition hub. Each contest comes with a unique theme, giving you a chance to challenge yourself, showcase your talent, and win real cash prizes from our prize pool.

      - Manage Your Balance
      Already got some profits from Nexbie? Simply send an email to contact@nexbie.com to manage your balance, including checking the balance statement and requesting a balance withdrawal
    `,
      expanded: false,
      expanding: false,
    },
    {
      title: 'What is Nex?',
      content: `
      "Nex" is our unique feature that turns community-loved art into real-world products through crowdfunding. It’s a risk-free way for your AIGC creations to make the leap from screen to reality.

      How does it work?
      1. Platform Selection: Our team keeps an eye out for the most promising designs, whether they're winning entries in the Nexbie Arcade or viral hits from Community Posts. Users cannot start a Nex for their own work.

      2. Campaign Launch: When a piece is selected, we launch a "Nex" for it. We set a funding goal, a price, and a time limit for the campaign.

      3. Community Backing: Anyone in the community can support the design by crowdfunding the item.

      4. Success or Failure:
      - Nex Success: If the funding goal is met within the time limit, the campaign is a success! The item goes into production, and backers receive the product they helped bring to life.
      - Nex Fail: If the goal isn't met, the campaign fails. Your design remains on your profile as a regular post for everyone to appreciate while all users who crowdfund the project will be refunded.

      Nex empowers our community to decide what gets made, ensuring that the most desired creations become tangible products.
    `,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Who are Pro Users?',
      content: `
      A Nexbie Pro User is a creator who has been verified by our team and granted access to an expanded set of professional-grade tools and privileges. This status is designed for artists and designers who want more control and flexibility over their work on the platform.

      Exclusive Pro Benefits:
      - Upload Your Own Designs: This is the biggest perk. While standard users create with our AI, Pro Users can upload their own finished designs, including high-resolution images (JPG, PNG) and even 3D engineering and modeling files (STL, 3MF). This allows you to integrate your existing workflow and portfolio with the Nexbie ecosystem.

      - Priority Consideration: Pro User creations receive priority when we select products for the official Nexbie store.

      How to Become a Pro User:
      If you are a professional creator, you can apply through our platform. The application requires you to submit your basic information and provide qualification materials, such as a link to your portfolio or professional social media pages, for review.
    `,
      expanded: false,
      expanding: false,
    },
  ]);

  // 将纯文本转换为安全的HTML格式
  const convertToHtml = (text) => {
    // 替换换行符为<br>
    let html = text.replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>');

    // 处理列表项
    html = html.replace(/- (.*?)<br>/g, '<li>$1</li>').replace(/<li>(.*?)<\/li><li>/g, '</li><li>');

    // 处理有序列表
    html = html.replace(/(\d+)\. (.*?)<br>/g, '<li>$1. $2</li>');

    // 包裹列表
    html = html.replace(/(<li>.*?<\/li>)+/g, '<ul class="term-sub-list">$&</ul>');

    // 包裹段落
    return `<p class="term-paragraph">${html}</p>`
      .replace(/<\/p><p><ul/g, '<ul')
      .replace(/<\/ul><\/p><p>/g, '</ul><p>');
  };

  // 切换条款的展开/折叠状态
  const toggleTerm = (index) => {
    terms.value.forEach((term, i) => {
      if (i !== index) {
        term.expanded = false;
        term.expanding = false;
      }
    });

    const currentTerm = terms.value[index];
    currentTerm.expanded = !currentTerm.expanded;

    if (currentTerm.expanded) {
      currentTerm.expanding = true;
      setTimeout(() => {
        currentTerm.expanding = false;
      }, 300);
    }
  };
</script>

<style scoped>
  /* 保持原有样式不变 */
  .terms-container {
    width: 100%;
    min-height: 100vh;
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 54px;
  }

  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 100;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .back-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin: 0;
    height: 100%;
  }

  .back-btn svg {
    margin-right: 8px;
    color: #f76b1b;
    flex-shrink: 0;
  }

  .back-text {
    transition: color 0.2s ease;
    flex-shrink: 0;
  }

  .back-btn:hover .back-text {
    color: #f76b1b;
  }

  .terms-content {
    padding: 0 20px 30px;
    max-width: 800px;
    margin: 0 auto;
  }

  .terms-title-main {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px;
    line-height: 1.4;
  }

  .terms-intro {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
  }

  .terms-list {
    background-color: #fff;
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .term-item {
    border-bottom: 1px solid #f0f0f0;
  }

  .term-item:last-child {
    border-bottom: none;
  }

  .term-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .term-title:hover {
    background-color: #fafafa;
  }

  .term-heading {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }

  .toggle-icon {
    color: #999;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .toggle-icon.expanded {
    transform: rotate(180deg);
    color: #f76b1b;
  }

  .term-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .content-inner {
    padding: 16px 24px 20px;
    font-size: 14px;
    color: #333;
    line-height: 1.9;
  }

  .large-line-height .content-inner {
    line-height: 2.1;
  }

  .term-content.expanding {
    overflow: hidden;
  }

  .term-item:nth-child(1) .term-content {
    max-height: 1200px;
  }
  .term-item:nth-child(2) .term-content {
    max-height: 1000px;
  }
  .term-item:nth-child(3) .term-content {
    max-height: 800px;
  }

  .term-sub-list {
    margin: 12px 0 20px 0;
    padding-left: 20px;
  }

  .term-sub-list li {
    margin-bottom: 16px;
    line-height: 1.9;
  }

  .term-sub-list li:last-child {
    margin-bottom: 0;
  }

  .term-paragraph {
    margin: 0 0 16px;
    line-height: 1.9;
  }

  .term-paragraph:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 375px) {
    .terms-container {
      padding-top: 50px;
    }

    .top-bar {
      height: 50px;
      padding: 0 16px;
    }

    .terms-content {
      padding: 0 16px 20px;
    }

    .terms-title-main {
      font-size: 18px;
      margin-bottom: 16px;
    }

    .terms-intro {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 20px;
      padding-bottom: 12px;
    }

    .term-title {
      padding: 16px 16px;
    }

    .term-heading {
      font-size: 15px;
    }

    .content-inner {
      padding: 14px 20px 18px;
      font-size: 13px;
      line-height: 1.8;
    }

    .large-line-height .content-inner {
      line-height: 2;
    }

    .term-sub-list {
      padding-left: 16px;
      margin: 10px 0 16px 0;
    }

    .term-sub-list li {
      margin-bottom: 12px;
    }

    .term-paragraph {
      margin-bottom: 12px;
    }
  }
</style>
